<template>
  <view class="u-p-t-28 main-pd u-p-b-80">
    <view class="u-flex">
      <view class="tab-con u-m-r-16" @click="$u.route('/pagesB/zxjf/wyf')">
        <u-image src="@/static/images/tabbg3.png" width="335rpx" height="124rpx" radius="12rpx"></u-image>
        <view class="tab-msg">
          <view class="tab-title"> 缴纳物业费 </view>
          <u-image src="@/static/images/icon11.png" width="32rpx" height="32rpx"></u-image>
        </view>
      </view>
      <view class="tab-con" @click="$u.route('/pagesB/zxjf/qtfy')">
        <u-image src="@/static/images/tabbg4.png" width="335rpx" height="124rpx" radius="12rpx"></u-image>
        <view class="tab-msg">
          <view class="tab-title"> 缴纳其他费用 </view>
          <u-image src="@/static/images/icon11.png" width="32rpx" height="32rpx"></u-image>
        </view>
      </view>
    </view>
    <view class="u-m-t-20 long-tab" @click="goUrl('/pagesB/zxjf/jzjg')">
      <u-image src="@/static/images/tabbg5.png" width="100%" height="124rpx" radius="12rpx"></u-image>
      <view class="tab-msg">
        <view class="tab-title"> 普通住宅物业服务费星级基准价格 </view>
        <u-image src="@/static/images/icon11.png" width="32rpx" height="32rpx"></u-image>
      </view>
    </view>
    <view class="u-m-t-48">
      <HeadTitle title="物业费用收支情况">
        <view @click="goUrl('/pagesB/zxjf/szqk')"><u-text suffixIcon="arrow-right" color="#bfbfbf" text="查看更多" :iconStyle="{
          fontSize: '28rpx', color: '#bfbfbf'
        }"></u-text></view>
      </HeadTitle>
      <view v-if="fyList.length">
        <ArticleList :articleList="fyList" url="/pagesB/zxjf/szqkDetail" :type="1" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import HeadTitle from "@/components/HeadTitle.vue";
import ArticleList from "@/components/ArticleList.vue";
import { getszgsListApi } from "@/api/index"
import { onLoad } from "@dcloudio/uni-app"
import useInfoStore from "@/store/user";
const userStore = useInfoStore();
let fyList = ref([]);
const goUrl = (url) => {
  uni.$u.route(url)
}
const getszgsList = ()=>{
  getszgsListApi({
    page:1,
    limit:6,
    deptId: userStore.deptId
  }).then(res=>{
    if(res.success){
      fyList.value = res.data
    }
  })
}
onLoad(()=>{
  getszgsList()
})
</script>

<style lang="scss" scoped>
.tab-con {
  position: relative;
  width: 335rpx;
  height: 124rpx;
}

.tab-msg {
  width: 100%;
  position: absolute;
  top: 38rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 26rpx;
  box-sizing: border-box;
}

.tab-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}

.long-tab {
  position: relative;
}
</style>
